<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useCartStore } from "../stores/cart";
const store = useCartStore();
const { name, products } = storeToRefs(store);
</script>

<template>
  <strong class="w-full">{{ name }}</strong>
  <ul
    className="w-full grid gap-2 grid-cols-[repeat(auto-fill,minmax(80px,1fr))]"
  >
    <li
      :key="product.name"
      v-for="product in products"
      class="h-20 cursor-pointer rounded-md bg-green-500 text-center text-3xl"
    >
      {{ product.name }}
      {{ product.price }}
    </li>
  </ul>
</template>